<template>
    <div class="outset">
        <div class="ba_f outmain">
            <div class="shuju_title mar_b20">
                <div class="shuju_title_text">
                    <span>外卖设置</span>
                </div>
            </div>
            <el-tabs v-model="activeName" @tab-click="handleClick" v-loading="listLoading">
                <el-tab-pane label="外卖设置" name="1">
                    <el-form ref="form" :model="form" label-width="180px">
                        <el-form-item label="营业时间" :required="true">
                            <el-radio-group v-model="form.timeType">
                                <el-radio label="1" border>全天24小时营业</el-radio>
                                <el-radio label="2" border>设置营业时间</el-radio>
                            </el-radio-group>
                            <div v-if="form.timeType=='2'" class="mar_t10">
                                <div class="time_item mar_b10" v-for="(item,index) in timeArr" :key="index">
                                    <el-time-select
                                            v-model="item.startTime"
                                            :picker-options="{start: '00:00',step: '00:05',end: '23:55'}"
                                            placeholder="选择时间"
                                            @change="selectTime($event,item,index,1)"
                                    style="width: 220px;">
                                    </el-time-select>
                                    <span class="mar_lr10">-</span>
                                    <span class="mar_r10" v-if="item.ciri">次日</span>
                                    <el-time-select
                                            v-model="item.endTime"
                                            :picker-options="{start: '00:00',step: '00:05',end: '23:55'}"
                                            placeholder="选择时间"
                                            @change="selectTime($event,item,index,2)"
                                            style="width: 220px;"
                                    >
                                    </el-time-select>
                                    <el-button type="text" @click="deltimeInterval(index)" class="fon_12 mar_l10">删除
                                    </el-button>
                                </div>
                                <el-button v-show="this.timeArr.length<3" type="text" @click="addtimeInterval">
                                    <Icon type="md-add"/>
                                    添加营业时间
                                </el-button>
                            </div>
                        </el-form-item>
                        <el-form-item label="商家公告">
                            <el-input v-model="form.notice" type="textarea" placeholder="请输入商家公告" class=""></el-input>
                        </el-form-item>
                        <el-form-item label="下单公告">
                            <el-input v-model="form.orderNotice" type="textarea" placeholder="请输入下单公告" class=""></el-input>
                        </el-form-item>
                        <el-form-item label="下单幻灯片">
                            <div class="uploadSource bor_de rel flex" v-for="(item, index) in form.orderMedia" :key="index">
<!--                                 <span @click="deleteMultiImage(item,2,'multigraph')" class="curs ab closeicon"-->
<!--                                       title="删除这张图片">-->
<!--                                      <i class="el-icon-circle-close fon_14 color_3"></i>-->
<!--                                </span>-->
                                <label class="statusLabel curs" @mouseenter="enterMultigraph(index,1)" @mouseleave="leaveMultigraph(index,1)">
                                    <i class="el-icon-check" :ref="`list1${index}`"></i>
                                    <i class="el-icon-close" @click="deleteMultiImage(item,2,'multigraph')"></i>
                                </label>
                                <img :src="item" @click='test(2)' class="wid img"/>
                            </div>
                            <div class="uploadSource flex-center curs" @click='test(2)'>
                                <i class="el-icon-plus fon_40 color_d9"></i>
                            </div>
                            <attachment-img ref="img2" type="imgs" @attachment='multigraph1'></attachment-img>
                        </el-form-item>
                        <el-form-item label="配送支持" :required="true">
                            <el-checkbox-group v-model="form.distributionSupport">
                                <el-checkbox label="1">外卖配送</el-checkbox>
                                <el-checkbox label="2">到店自提</el-checkbox>
                            </el-checkbox-group>
                        </el-form-item>
                        <div v-if="form.distributionSupport.indexOf('2') >-1">
                            <el-form-item label="消费方式" :required="true">
                                <el-checkbox-group v-model="form.diningType">
                                    <el-checkbox label="1" name="type">店内就餐</el-checkbox>
                                    <el-checkbox label="2" name="type">打包带走</el-checkbox>
                                </el-checkbox-group>
                            </el-form-item>
                            <el-form-item label="自提地址">
                                <el-input placeholder="请输入地址" v-model="form.address" style="width: 400px">
                                    <el-button slot="append" @click="searchMapClick">搜索</el-button>
                                </el-input>
                            </el-form-item>
                            <el-form-item label="经纬度">
                                <el-input v-model="form.lng" disabled style="width: 130px" class=""></el-input>
                                <el-input v-model="form.lat" disabled style="width: 130px" class="mar_l20"></el-input>
                            </el-form-item>
                            <el-form-item label="地图定位">
                                <select-map ref="mapCom" :mapLng='form.lng' :mapLat='form.lat'
                                            :mapAddress='form.address' @clickmap='getMapdata'></select-map>
                            </el-form-item>
                        </div>
<!--                        <el-form-item label="自动接单">-->
<!--                            <el-radio-group v-model="form.open">-->
<!--                                <el-radio label="1">开启</el-radio>-->
<!--                                <el-radio label="2">关闭</el-radio>-->
<!--                            </el-radio-group>-->
<!--                        </el-form-item>-->
                        <el-form-item label="包装费">
                            <el-radio-group v-model="form.boxType">
                                <el-radio label="2">按商品收取</el-radio>
                                <el-radio label="1">按单收取</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="每单收取" v-if="form.boxType=='1'">
<!--                            <el-input placeholder="请输入按订单收取数量" v-model="form.boxMoney">-->
<!--                                <template slot="append">元</template>-->
<!--                            </el-input>-->
                            <el-input-number v-model="form.boxMoney" :precision="2" :step="1" style="width: 400px" :min="0.00"></el-input-number>
                        </el-form-item>
                        <el-form-item label="打印设置">
                            <el-radio-group v-model="form.printType">
                                <el-radio label="1">订单支付后打印小票</el-radio>
                                <el-radio label="2">商家接单后打印小票</el-radio>
                            </el-radio-group>
                          <div class="yb_margin lh16">备注：防止漏单，建议订单支付后自动打印小票，此功能需要配合小票机使用</div>
                        </el-form-item>
                        <el-form-item label="外卖码">
                            <el-button
                                    size="mini"
                                    type="primary"
                                    plain
                                    @click="codeSee">查看二维码
                            </el-button>
                        </el-form-item>
                    </el-form>
                </el-tab-pane>
                <el-tab-pane label="预约单设置" name="2">
                    <el-form ref="form2" :model="form2" label-width="180px">
                        <el-form-item label="预约单支持">
                            <el-checkbox-group v-model="form2.open">
                                <el-checkbox label="1" name="type">外卖</el-checkbox>
                                <el-checkbox label="2" name="type">自提</el-checkbox>
                            </el-checkbox-group>
                        </el-form-item>
                        <div v-if="form2.open.length>0">
                            <el-form-item label="休息时间支持预定">
                                <el-radio-group v-model="form2.restOpen">
                                    <el-radio label="1">开启</el-radio>
                                    <el-radio label="2">关闭</el-radio>
                                </el-radio-group>
                            </el-form-item>
                            <el-form-item label="可提前预定天数">
                                <el-select v-model="form2.day" placeholder="请选择">
                                    <el-option
                                            v-for="item in options"
                                            :key="item.value"
                                            :label="item.label"
                                            :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="预定开始时间">
                              <el-select v-model="form2.startTime" placeholder="请选择">
                                <el-option
                                    v-for="item in options4"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                                </el-option>
                              </el-select>
                            </el-form-item>
                            <el-form-item label="预订单提醒时间">
                                <el-select v-model="form2.remind" placeholder="请选择">
                                    <el-option
                                            v-for="item in options3"
                                            :key="item.value"
                                            :label="item.label"
                                            :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="预订单间隔时间">
                                <el-select v-model="form2.interval" placeholder="请选择">
                                    <el-option
                                            v-for="item in options2"
                                            :key="item.value"
                                            :label="item.label"
                                            :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="预订单打印时间">
                                <el-radio-group v-model="form2.print">
                                    <el-radio label="1">提醒时打印</el-radio>
                                    <el-radio label="2">接单时打印</el-radio>
                                    <el-radio label="3">提醒时和接单时均打印</el-radio>
                                </el-radio-group>
                            </el-form-item>
                        </div>
                    </el-form>
                </el-tab-pane>
                <el-tab-pane label="制作时间" name="3">
                    <el-form ref="form3" :model="form3" label-width="180px">
                        <el-form-item label="制作时间">
                            <el-radio-group v-model="form3.open">
                                <el-radio label="1">开启</el-radio>
                                <el-radio label="2">关闭</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <div>
                            <el-form-item label="制作单位">
                                <el-radio-group v-model="form3.type">
                                    <el-radio label="1">按单</el-radio>
                                    <el-radio label="2">按件</el-radio>
                                </el-radio-group>
                            </el-form-item>
                            <el-form-item label="选择单位" v-show="form3.type=='2'">
                                <el-select v-model="form3.unit" placeholder="请选择商品单位">
                                    <el-option
                                            v-for="item in optionsUnit"
                                            :key="item.id"
                                            :label="item.name"
                                            :value="item.name">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </div>
                        <el-form-item label="每（单/件）制作时间">
                            <el-input v-model="form3.time" type="number" placeholder="请输入单个商品制作时间">
                                <template slot="append">分钟</template>
                            </el-input>
                        </el-form-item>
                    </el-form>
                </el-tab-pane>
            </el-tabs>
            <el-dialog
                    title="二维码"
                    :visible.sync="dialogVisiblecode"
                    :close-on-click-modal="false"
                    width="30%">
                <div class="t_c">
                    <img :src="codeImg" class="wid imgCode"/>
                </div>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogVisiblecode = false" size="medium">取 消</el-button>
                    <el-button type="primary" @click="dialogVisiblecode = false" size="medium">确 定</el-button>
                </div>
            </el-dialog>
        </div>
        <div class="mar_t20 ba_f pad_20 t_c">
            <el-button type="primary" @click="submitForm">保存</el-button>
        </div>
    </div>
</template>
<script>
    import attachmentImg from "@/plugins/attachment-img";
    import selectMap from "@/plugins/selectmap";
    import {postStoreConfig,getStoreConfig,getCode} from "@/api/setup";
    import {goodRender} from "@/api/good";

    export default {
        components: {selectMap,attachmentImg},
        created() {
            this.edit();
            this.goodRender();
        },
        data() {
            return {
                activeName: '1',
                form: {
                    timeType: '1',
                    distributionSupport: [],
                    diningType: [],
                    boxType: '2',
                    boxMoney: '',
                    printType: '1',
                    open: '1',
                    lng: 114.304692,
                    lat: 30.59331,
                    address: '湖北省武汉市',
                    orderNotice: '',
                    notice: '',
                    orderMedia: [],
                },
                form2: {
                    open: [],
                    restOpen: '1',
                    day: '',
                    remind: '1',
                    interval: '1',
                    print: '1',
                    startTime: '1',
                },
                form3: {
                    open: '2',
                    type: '1',
                    unit: '',
                    num: '',
                    time: '3',
                },
                timeArr: [],
                options: [{
                    value: '0',
                    label: '当日'
                }, {
                    value: '1',
                    label: '1天'
                }, {
                    value: '2',
                    label: '2天'
                }, {
                    value: '3',
                    label: '3天'
                }, {
                    value: '4',
                    label: '4天'
                }, {
                    value: '5',
                    label: '5天'
                }, {
                    value: '6',
                    label: '6天'
                }],
                options2: [
                    {
                        value: '15',
                        label: '15分钟'
                    }, {
                        value: '30',
                        label: '30分钟'
                    }, {
                        value: '45',
                        label: '45分钟'
                    }, {
                        value: '60',
                        label: '1小时'
                    }, {
                        value: '75',
                        label: '1小时15分钟'
                    }, {
                        value: '90',
                        label: '1小时30分钟'
                    }, {
                        value: '105',
                        label: '1小时45分钟'
                    }, {
                        value: '120',
                        label: '2小时'
                    }, {
                        value: '135',
                        label: '2小时15分钟'
                    }, {
                        value: '150',
                        label: '2小时30分钟'
                    }, {
                        value: '165',
                        label: '2小时45分钟'
                    }, {
                        value: '180',
                        label: '3小时'
                    }],
                options3: [
                    {
                        value: '15',
                        label: '15分钟'
                    }, {
                        value: '30',
                        label: '30分钟'
                    }, {
                        value: '45',
                        label: '45分钟'
                    }, {
                        value: '60',
                        label: '1小时'
                    }],
                options4: [{
                  value: '0',
                  label: '当天'
                }, {
                  value: '1',
                  label: '明天'
                }, {
                  value: '2',
                  label: '后天'
                }, ],
                ciri: true,
                value: '',
                optionsUnit: [],
                listLoading:false,
                codeImg:'',
                dialogVisiblecode: false,
            }
        },
        methods: {
            async goodRender() {
                const {data} = await goodRender()
                this.optionsUnit = data.unitData
            },
            getMapdata(mapAddress, mapLat, mapLng) {
                this.form.address = mapAddress
                this.form.lat = mapLat
                this.form.lng = mapLng
            },
            searchMapClick() {
                console.log(this.$refs.mapCom) //返回的是一个vue对象，所以可以直接调用其方法
                this.$refs.mapCom.searchKeyword();
            },
            addtimeInterval() {
                let specObj = {startTime: '00:00', endTime: '00:00', ciri: true,}
                this.$set(this.timeArr, this.timeArr.length, specObj)
            },
            deltimeInterval(index) {
                this.$delete(this.timeArr, index)
            },
            selectTime(value, item, index, type) {
                //value是点击返回的时间，item是开始和结束时间，idnex是所有，type是区别是点击开始时间还是结束时间
                //type=1是判断开始时间，2是判断结束时间、、加type为了判断两种情况先选开始时间和先选结束时间
                //如果结束时间小于开始时间就为次日
                // console.log('111',value,item,index,type)
                // console.log('122',value,item.endTime,item.startTime)
                for (let i = 0; i < this.timeArr.length; i++) {
                    // console.log('index',i,index)
                    if (i == index) {
                        // console.log('当前选择数据')
                        if (type == 1) {
                            if (value >= item.endTime) {
                                // console.log('111111')
                                item.ciri = true
                            } else {
                                item.ciri = false
                            }
                        }
                        if (type == 2) {
                            // console.log('222222')
                            if (value <= item.startTime) {
                                item.ciri = true
                            } else {
                                item.ciri = false
                            }
                        }
                    }
                }
            },
            test(i = 0) {
                console.log(this.$refs, i)
                this.$refs['img' + i].dialogVisible = true
            },
            enterMultigraph(index,i=0){
                //多图删除，i是指文档中的第几个ref多图对象，index图片列表
                this.$refs[`list${i}${index}`][0].style.display = 'none';
            },
            leaveMultigraph(index,i=0){
                this.$refs[`list${i}${index}`][0].style.display = 'inline-block';
            },
            imgadd1(url) {
                this.form.icon = url.str
            },
            multigraph1(url) {
                if(this.form.orderMedia && this.form.orderMedia.length>0){
                    this.form.orderMedia = this.form.orderMedia.concat(url.arr)
                }else{
                    this.form.orderMedia = url.arr
                }
            },
            deleteMultiImage(item, index, type) {
                //typem没传是单图multigraph多图；index上传图片组件排序
                Array.prototype.remove = function (val) {
                    var index = this.indexOf(val);
                    if (index > -1) {
                        this.splice(index, 1);
                    }
                };
                if (type == 'multigraph') {
                    switch (index) {
                        case 2:
                            this.form.orderMedia.remove(item);
                            break
                    }
                } else {
                    switch (index) {
                        case 1:
                            this.form.icon = '';
                            break
                    }
                }
            },
            handleClick() {
                this.edit()
            },
            async edit() {
                if (+this.activeName == '1') {
                    const {data} = await getStoreConfig({ident: 'takeOutSet'});
                    this.formc = this.form
                    this.form = Object.assign(this.formc, data);
                    if (data) {
                      this.form.lat = +data.lat
                      this.form.lng = +data.lng
                    }
                    if(data.timeArr){
                        this.timeArr = data.timeArr.map((v => (
                            {endTime:v.endTime,ciri:v.ciri,startTime:v.startTime}
                        )))
                    }
                } else if (+this.activeName == '2') {
                    const {data} = await getStoreConfig({ident: 'advanceSet'});
                    this.formc = this.form2
                    this.form2 = Object.assign(this.formc, data);
                }else if (+this.activeName == '3') {
                    const {data} = await getStoreConfig({ident: 'makeTime'});
                    this.formc = this.form3
                    this.form3 = Object.assign(this.formc, data);
                }
            },
            async submitForm() {
                console.log('submit!');
                // console.log(this.form)
                if (this.activeName == '1') {
                    this.form.ident = 'takeOutSet'
                    this.form.timeArr = this.timeArr
                    const {msg} = await postStoreConfig(this.form);
                    this.$baseMessage(msg, "success");
                    this.$router.push({path: '/outset'})
                } else if (this.activeName == '2') {
                    this.form2.ident = 'advanceSet'
                    const {msg} = await postStoreConfig(this.form2);
                    this.$baseMessage(msg, "success");
                    this.$router.push({path: '/outset'})
                }else if (this.activeName == '3') {
                    this.form3.ident = 'makeTime'
                    const {msg} = await postStoreConfig(this.form3);
                    this.$baseMessage(msg, "success");
                    this.$router.push({path: '/outset'})
                }
            },
            async codeSee() {
                this.listLoading = true;
                const {data} = await getCode({ident: 'goods',page:'yb_wm/index/goods'});
                if(data){
                    this.codeImg = data
                }
                this.listLoading = false;
                this.dialogVisiblecode = true
            },
        }
    }
</script>
<style lang="scss" scoped>
    .outset .el-form {
        margin-top: 20px;
    }
    .imgCode{
        width: 200px;
        height: 200px;
    }
    .el-button.is-plain:focus, .el-button.is-plain:hover {
        border-color: #155BD4;
        color: #fff;
    }
</style>
